<template>
    <div class="mainContent">
        <div class="part">
            <div class="main-panel">
                <div class="tools">
                    <div class="ph"></div>
                    <div class="buttons" :class="{active:active===1}" @click="changeActive(1)">人员基本信息</div>
                    <div class="buttons" :class="{active:active===2}" @click="changeActive(2)">核酸检测信息</div>
                    <div class="buttons" :class="{active:active===3}" @click="changeActive(3)">密接信息</div>
                    <div class="buttons" :class="{active:active===4}" @click="changeActive(4)">集中或居家隔离信息</div>
                    <div class="buttons" :class="{active:active===5}" @click="changeActive(5)">场所出入信息</div>
                    <div class="ph"></div>
                </div>
                <div class="detail">
                    <div class="row">
                        <div class="cell">
                            <i class="iconfont icon-user"></i>
                            <span class="label">姓名：</span>
                            <span class="val">{{formData.personBase.name}}</span>
                        </div>
                        <div class="cell">
                            <i class="iconfont icon-id-card"></i>
                            <span class="label">证件号码：</span>
                            <span class="val">{{formData.personBase.idNumber}}</span>
                        </div>
                        <div class="cell">
                            <i class="iconfont icon-phone"></i>
                            <span class="label">联系方式：</span>
                            <span class="val">{{formData.personBase.phoneNumber}}</span>
                        </div>
                        <div class="cell">
                            <i class="iconfont icon-advise"></i>
                            <span class="label">登记时间：</span>
                            <span class="val">{{formData.personBase.createTime}}</span>
                        </div>
                    </div>
                    <div class="row">
                        <div class="cell">
                            <i class="iconfont icon-form"></i>
                            <span class="label">户标签：</span>
                            <span class="val">{{formData.personBase.tags}}</span>
                        </div>
                        <div class="cell">
                            <i class="iconfont icon-shijian"></i>
                            <span class="label">最后一次来周返周时间：</span>
                            <span class="val">{{formData.personBase.lastReturn}}</span>
                        </div>
                        <div class="cell" style="flex:1.5;">
                            <i class="iconfont icon-location"></i>
                            <span class="label"> 现住址：</span>
                            <span class="val">{{formData.personBase.address}}</span>
                        </div>
                        <div class="cell" style="flex:0.5"></div>
                    </div>
                </div>
                <div class="graph">
                  <div class="graph-title" v-if="active===1">关系图谱</div>
                  <div class="graph-title" v-if="active===5">最新扫码结果</div>
<!--                    <div class="graph-body"></div>-->
                  <div class="graph-body">
                    <graph v-if="active===1" :param="formData.familyMembers"></graph>
                    <nucleic-acid v-if="active===2" :param="formData.hsResults"></nucleic-acid>
                    <access v-if="active===5" :param="formData.placeCodes"></access>
                  </div>

                </div>
            </div>
            <div class="data-panel">
                <div class="search-bar">
                    <input v-model="form.key" placeholder="请输入您的姓名/身份证/手机号">
                    <button @click="getParam">搜索</button>
                </div>
                <div class="data-group">
                    <div class="data-group-title">专题库</div>
                    <div class="data">
                        <div class="data-item" @click="routerTo('/admin/#/yq/Person')">
                            <i class="iconfont icon-users"></i>
                            <span>人员基础数据库</span>
                        </div>
                    </div>
                    <div class="data">
                        <div class="data-item" @click="routerTo('/admin/#/yq/HsResultNeusoft')">
                            <i class="iconfont icon-tools"></i>
                            <span>核酸检测采集数据库</span>
                        </div>
                    </div>
                    <div class="data">
                        <div class="data-item" @click="routerTo('/admin/#/yq/HsResultHw')">
                            <i class="iconfont icon-form"></i>
                            <span>核酸检测结果数据库</span>
                        </div>
                    </div>
                    <div class="data">
                        <div class="data-item" @click="routerTo('/admin/#/yq/RiskPlace')">
                            <i class="iconfont icon-qrcode"></i>
                            <span>场所码申请数据库</span>
                        </div>
                    </div>
                    <div class="data">
                        <div class="data-item" @click="routerTo('/admin/#/yq/PlaceScanRec')">
                            <i class="iconfont icon-scan"></i>
                            <span>场所码扫码记录数据库</span>
                        </div>
                    </div>
                    <div class="data">
                        <div class="data-item" @click="routerTo('/admin/#/yq/PersonBackHome')">
                            <i class="iconfont icon-exchange"></i>
                            <span>来返周人员数据库</span>
                        </div>
                    </div>
                </div>
                <div class="data-group">
                    <div class="data-group-title">特色库</div>
                    <div class="data">
                        <div class="data-item" @click="routerTo('/admin/#/yq/PersonPositive')">
                            <i class="iconfont icon-role"></i>
                            <span>阳性病人数据库</span>
                        </div>
                    </div>
                    <div class="data">
                        <div class="data-item" @click="routerTo('/admin/#/yq/PersonCloseContacts')">
                            <i class="iconfont icon-department"></i>
                            <span>阳性病人关系数据库</span>
                        </div>
                    </div>
                    <div class="data">
                        <div class="data-item" @click="routerTo('/admin/#/yq/PersonCentralIsolated')">
                            <i class="iconfont icon-location"></i>
                            <span>集中隔离人员数据库</span>
                        </div>
                    </div>
                    <div class="data">
                        <div class="data-item" @click="routerTo('/admin/#/yq/PersonHomeIsolated')">
                            <i class="iconfont icon-renyuanjinchuzuyongzonghang"></i>
                            <span>居家隔离人员数据库</span>
                        </div>
                    </div>
                    <div class="data">
                        <div class="data-item" @click="routerTo('/admin/#/yq/PersonFeverRegist')">
                            <i class="iconfont icon-renyuanjinchuzuyongzonghang"></i>
                            <span>发热门诊登记数据库</span>
                        </div>
                    </div>
                    <div class="data">
                        <div class="data-item" @click="routerTo('/admin/#/yq/PersonRenter')">
                            <i class="iconfont icon-home"></i>
                            <span>出租屋人员数据库</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <user-click v-if="dialogVisible" :visible="dialogVisible" :data="tableData" @close="closeDialog" @confirm="confirmDialog"></user-click>
</template>

<script>
import MoniterItem from "@/components/MoniterItem.vue";
import Graph from "@/views/oneKeySearch/components/graph.vue";
import NucleicAcid from "@/views/oneKeySearch/components/nucleicAcid.vue";
import Access from "@/views/oneKeySearch/components/access.vue";
import { selectByKey, selectByKeyQuery } from "../../api/oneKeySearch";
import UserClick from "@/views/oneKeySearch/components/userClick.vue";
import { ElNotification } from "element-plus";
export default {
  components: { UserClick, Access, NucleicAcid,Graph,MoniterItem },
  data(){
    return{
      dialogVisible:false,
      tableData:[],
      active:1,
      form:{
        result:[],
        key:'210922198403162729',
      },
      formData:{
        personBase:{
          name:'',
          phoneNumber:'',
          idNumber:'',
          address:'',
          createTime:'',
          tags:'',
          lastReturn:'',
        },
        familyMembers:[],
        hsResults:[],
        placeCodes:[],
      }
    }
  },
  methods:{
    changeActive(index){
      this.active=index
    },
    // 根据筛选条件查询相关数据
    getParam(){
      selectByKey({key:this.form.key}).then(res=>{
        if (res.data.data.length!==0){
          if (res.data.data.length>1){
            this.tableData=res.data.data
            this.dialogVisible=true
          }else {
            this.getInfo(res.data.data[0].idNumber)
          }
        }else {
          ElNotification({
            title: 'Error',
            message: '暂无相关信息',
            type: 'error',
          })
        }

      })
    },
    // 获取人员数据
    getInfo(idNumber){
      selectByKeyQuery({idNumber:idNumber}).then(res=>{
        this.formData=res.data.data
      })
    },
    // 关闭弹窗
    closeDialog(){
      this.dialogVisible=false
    },
    // 人员选择后根据身份证查询人员信息
    confirmDialog(idNumber){
      this.dialogVisible=false
      this.getInfo(idNumber)
    },
    // 跳转外部链接 -- key超过10位跳转时带参数
    routerTo(url){
      const param=this.form.key.length>10?'?key='+this.form.key:''
      window.open(url+param, "_blank");
    }

  }
}


</script>

<style lang="less" scoped>
.mainContent {
    height: 86vh;
    display: flex;
    flex-direction: column;
    flex: 1;
    /*background: url("../../assets/one_key_search.png") no-repeat;
    background-size: 100% 100%;*/
    .part {
        height: 100%;
        display: flex;
        flex: 1;
        flex-direction: row;
        .main-panel {
            flex: 3;
            display: flex;
            background-image: url("../../assets/large_item.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            margin: 0.8vh;
            flex-direction: column;
            >div {
                background-color: #2861AF;
                margin: 1vh 2vh
            }
            .tools {
                background-color: transparent;
                display: flex;
                vertical-align: middle;
                flex-direction: row;
                flex: 1;
                .ph {
                    flex: 1;
                    height: 4vh;
                    margin: 1vh;
                    margin-top:4.5vh;
                }
                .buttons {
                    flex: 1;
                    height: 4vh;
                    line-height: 4vh;
                    font-size: 1.2vh;
                    font-weight: 700;
                    color: #fff;
                    text-align: center;
                    margin: 1vh;
                    margin-top:4.5vh;
                    background-color: #1275DB;
                    cursor: pointer;
                }
                .buttons:hover {
                    background-color: #0098D4;
                }
                .buttons.active {
                    background-color: #0098D4;
                }
            }
            .detail {
                display: flex;
                flex: 1;
                flex-direction: column;
                .row {
                    display: flex;
                    flex: 1;
                    flex-direction: row;
                    .cell {
                        padding: 2vh 2vh 1vh 2vh;
                        height: 3vh;
                        line-height: 3vh;
                        font-size: 1.2vh;
                        flex: 1;
                        i.iconfont {
                            color: #10F3FC
                        }
                        .label {
                            padding:1vh;
                            color: #c6e4f5
                        }
                        .val {
                            color: #fff
                        }
                    }
                }
            }
            .graph {
                display: flex;
                flex-direction: column;
                flex: 4;
                padding: 2vh;
                .graph-title {
                    height: 32px;
                    line-height: 32px;
                    padding-left: 2vh;
                    font-size: 16px;
                    color: #10F3FC;
                    background: url("../../assets/graph-title.png") no-repeat;
                    background-size: 100% 100%;
                }
                .graph-body {
                    flex:1;
                  height: 486px;
                    //background: url("../../assets/temp.png") no-repeat;
                    //background-size: 100% 100%;
                }
            }
        }
        .data-panel {
            flex: 0.8;
            display: flex;
            flex-direction: column;
            background-image: url("../../assets/left-item.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            margin: 0.8vh;
            .search-bar {
                height: 80px;
                line-height: 80px;
                padding-left: 20px;
                padding-right: 20px;
                input {
                    height: 40px;
                    padding-left: 20px;
                    background: #2861AF;
                    border: 1px solid #3EC1EF;
                    opacity: 0.5;
                    border-radius: 20px;
                  margin-right: 10px;
                    width:65%;
                    font-size:16px;
                    font-family: Source Han Sans CN,serif;
                    font-weight: 400;
                    line-height: 28px;
                    color: #FFFFFF;
                }
              input::-webkit-input-placeholder{
                  //color: #1890ff;
                color: #FFFFFF;
                }
              /* IE 10+ */
              input:-ms-input-placeholder{
                color: #FFFFFF;
              }
              /* Firefox 4-18 */
              /* Firefox 19+ */
              input:-moz-placeholder,
              input::-moz-placeholder{
                color: #FFFFFF;
              }
              input:focus {
                outline:none;
                border: 1px solid #3EC1EF;
              }
                button {
                    width: 80px;
                    height: 40px;
                    background: #0098D4;
                   border: none;
                    opacity: 1;
                    border-radius: 20px;
                    color:#ccc;
                    font-size:16px;
                    cursor: pointer;
                }
            }
            .data-group {
                flex: 1;
                background: #2861AF;
                opacity: 0.8;
                margin: 0 1.5vh 1.5vh 1.5vh;
                border-radius: 0px;
                display: flex;
                flex-direction: column;
                padding: 1vh;
                div {
                    flex: 1;
                }
                .data-group-title {
                    flex: 0.5;
                    background: url("../../assets/data-group-title.png") no-repeat;
                    background-size: 100% 100%;
                    padding-left: 2vh;
                    font-size: 18px;
                    font-weight: bold;
                    line-height: 28px;
                    color: #10F3FC;
                    opacity: 1;
                    margin-bottom: 1vh;
                }
                .data {
                    padding-top: 0.5vh;
                    padding-bottom: 0.5vh;
                    clear: both;
                    .data-select {
                        float: left;
                        width: 10%;
                        vertical-align: middle;
                        height: 32px;
                        padding-top:9px;
                        input {
                            width: 18px;
                            height: 18px;
                            background: #104889;
                            border: 1px solid rgba(161,211,253,0.4);
                            opacity: 1;
                            border-radius: 0px;
                        }
                    }
                    .data-item {
                        width: 100%;
                        float: left;
                        cursor: pointer;
                        background: url("../../assets/data-item.png") no-repeat;
                        background-size: 100% 100%;
                        height: 32px;
                        line-height: 32px;
                        i.iconfont {
                            color: #7adaf1;
                            position: relative;
                            left: 20px
                        }
                        span {
                            color: #fff;
                            position: relative;
                            left: 80px
                        }
                    }
                }
            }
        }
    }

}
</style>
